<template>
  <vue-tab current="index"></vue-tab>
  <div class="sec-top">
    <vue-date-picker
      :time.sync="startTime"
      :option="datePickerOption">
    </vue-date-picker>
    到 <vue-date-picker
      :time.sync="endTime"
      :option="datePickerOption">
    </vue-date-picker>
    &nbsp;&nbsp;
    <div class="form-inline">
      支付状态
      <select class="form-control input-sm" v-model="status">
        <option value="-1">全部</option>
        <option value="1">待确认</option>
        <option value="2">待支付</option>
        <option value="3">付款中</option>
        <option value="4">完成付款</option>
      </select>
      &nbsp;&nbsp;
      操作类型
      <select class="form-control input-sm" v-model="operant">
        <option value="-1">全部</option>
        <option value="1">开户</option>
        <option value="2">交易</option>
      </select>
    </div>
    <button class="btn btn-primary btn-sm" @click="getList">查询</button>
    <span class="btn-right">
      <input type="button" :disabled="noSelectUser" class="btn btn-sm btn-primary"  @click="confirm()" value="确认">
    </span>
    
  </div>
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th class="col-sm-6" colspan="5">{{userDesc}}</th>
        <th class="col-sm-6" colspan="4">{{priceDesc}}</th>
      </tr>
      <tr>
        <th class="col-sm-1"><input type="checkbox" v-model="checkAll" > 用户姓名</th>
        <th class="col-sm-1">联系方式</th>
        <th class="col-sm-1">操作记录</th>
        <th class="col-sm-1">所属券商</th>
        <th class="col-sm-2">操作时间</th>
        <th class="col-sm-2">操作确认时间</th>
        <th class="col-sm-1">获取收益(元)</th>
        <th class="col-sm-2">结算时间</th>
        <th class="col-sm-1">状态</th>
      </tr>
    </thead>
    <tbody v-el:list>
      <tr v-for="item in list">
        <td><input type="checkbox" value={{item.id}} v-model="checkedNames" >{{item.name}}</td>
        <td>{{item.phone}}</td>
        <td>{{item.operant}}</td>
        <td>{{item.securityCode | securityName}}</td>
        <td>{{item.operantTime}}</td>
        <td>{{item.verifyTime}}</td>
        <td>{{item.price}}</td>
        <td>{{item.payTime}}</td>
        <td>{{item.status}}</td>
      </tr>
    </tbody>
  </table>
  <vue-pages :pages.sync="pages" :get-list="getList"></vue-pages>
</template>
<style src="./settle-detail.css" scoped></style>
<script src="./settle-detail.js"></script>